<template>
    <a-card title="验证完成情况" :bordered="false">
        <div class="check-table">
            <a-table
                :columns="columns"
                :data-source="tableData"
                bordered
                size="middle"
                :pagination="false"
                :scroll="{ x: 'max-content' }"
            >
                <!-- 自定义表头 -->
                <template #headerCell="{ column }">
                    <template v-if="column.isGroup">
                        <div style="text-align: center; font-weight: bold">
                            {{ column.title }}
                        </div>
                    </template>
                </template>

                <!-- 自定义单元格 -->
                <template #bodyCell="{ column, text }">
                    <span
                        :class="{
                            'completed': text === '已完成',
                            'in-progress': text === '进行中',
                            'planned': text === '计划中',
                            'not-started': text === '未开始'
                        }"
                    >
                        {{ text }}
                    </span>
                </template>
            </a-table>
        </div>
    </a-card>
</template>

<script>
    import { ref, onMounted } from 'vue'
    import { Card, Table } from 'ant-design-vue'

    export default {
        components: {
            'a-card': Card,
            'a-table': Table
        },
        setup() {
            // 季度配置
            const quarters = [
                {
                    key: 'q1',
                    title: '一季度'
                },
                {
                    key: 'q2',
                    title: '二季度'
                },
                {
                    key: 'q3',
                    title: '三季度'
                },
                {
                    key: 'q4',
                    title: '四季度'
                }
            ]
            // 月份配置
            const months = [
                { key: '1', title: '季度小计', quarters: 'q1' },
                { key: 'jan', title: '一月', quarters: 'q1' },
                { key: 'feb', title: '二月', quarters: 'q1' },
                { key: 'mar', title: '三月', quarters: 'q1' },
                { key: '2', title: '季度小计', quarters: 'q2' },
                { key: 'apr', title: '四月', quarters: 'q2' },
                { key: 'may', title: '五月', quarters: 'q2' },
                { key: 'jun', title: '六月', quarters: 'q2' },
                { key: '3', title: '季度小计', quarters: 'q3' },
                { key: 'jul', title: '七月', quarters: 'q3' },
                { key: 'aug', title: '八月', quarters: 'q3' },
                { key: 'sep', title: '九月', quarters: 'q3' },
                { key: '4', title: '季度小计', quarters: 'q4' },
                { key: 'oct', title: '十月', quarters: 'q4' },
                { key: 'nov', title: '十一月', quarters: 'q4' },
                { key: 'dec', title: '十二月', quarters: 'q4' }
            ]

            // 表格列配置
            const columns = ref([
                {
                    title: '项目',
                    dataIndex: 'project',
                    key: 'project',
                    width: 150,
                    fixed: 'left'
                },
                // 预计验证大列
                {
                    title: '预计验证',
                    isGroup: true,
                    children: quarters.map(quarter => ({
                        title: quarter.title,
                        dataIndex: quarter.dataIndex,
                        key: quarter.key,
                        align: 'center',
                        width: 200,
                        children: months
                            .filter(month => month.quarters === quarter.key)
                            .map(month => ({
                                title: month.title,
                                dataIndex: `check_${month.key}`,
                                key: `check_${month.key}`,
                                align: 'center',
                                width: 200
                            }))
                    }))
                },
                // 验收完成大列
                {
                    title: '验收完成',
                    isGroup: true,
                    children: quarters.map(quarter => ({
                        title: quarter.title,
                        dataIndex: quarter.dataIndex,
                        key: quarter.key,
                        align: 'center',
                        width: 200,
                        children: months
                            .filter(month => month.quarters === quarter.key)
                            .map(month => ({
                                title: month.title,
                                dataIndex: `verify_${month.key}`,
                                key: `verify_${month.key}`,
                                align: 'center',
                                width: 200
                            }))
                    }))
                }
                // {
                //     title: '验收完成',
                //     isGroup: true,
                //     children: months.map(month => ({
                //         title: month.title,
                //         dataIndex: `verify_${month.key}`,
                //         key: `verify_${month.key}`,
                //         align: 'center',
                //         width: 100
                //     }))
                // }
            ])

            // 表格数据
            const tableData = ref([])
            const rawData = ref({
                projects: [
                    {
                        id: 1,
                        name: '项目A',
                        check: {
                            jan: '计划中',
                            feb: '计划中',
                            mar: '计划中',
                            apr: '进行中',
                            may: '进行中',
                            jun: '进行中',
                            jul: '未开始',
                            aug: '未开始',
                            sep: '未开始',
                            oct: '未开始',
                            nov: '未开始',
                            dec: '未开始'
                        },
                        verify: {
                            jan: '已完成',
                            feb: '已完成',
                            mar: '已完成',
                            apr: '进行中',
                            may: '未开始',
                            jun: '未开始',
                            jul: '未开始',
                            aug: '未开始',
                            sep: '未开始',
                            oct: '未开始',
                            nov: '未开始',
                            dec: '未开始'
                        }
                    },
                    {
                        id: 2,
                        name: '项目B',
                        check: {
                            jan: '已完成',
                            feb: '已完成',
                            mar: '已完成',
                            apr: '已完成',
                            may: '进行中',
                            jun: '进行中',
                            jul: '计划中',
                            aug: '计划中',
                            sep: '未开始',
                            oct: '未开始',
                            nov: '未开始',
                            dec: '未开始'
                        },
                        verify: {
                            jan: '已完成',
                            feb: '已完成',
                            mar: '已完成',
                            apr: '已完成',
                            may: '已完成',
                            jun: '进行中',
                            jul: '未开始',
                            aug: '未开始',
                            sep: '未开始',
                            oct: '未开始',
                            nov: '未开始',
                            dec: '未开始'
                        }
                    }
                ]
            })

            // 处理数据格式
            const processData = () => {
                tableData.value = rawData.value.projects.map(project => {
                    const rowData = {
                        key: project.id,
                        project: project.name
                    }

                    // 处理预计验证数据
                    months.forEach(month => {
                        rowData[`check_${month.key}`] = project.check[month.key]
                    })

                    // 处理验收完成数据
                    months.forEach(month => {
                        rowData[`verify_${month.key}`] = project.verify[month.key]
                    })

                    return rowData
                })
            }

            onMounted(() => {
                processData()
                console.log(rawData.value)
                console.log(columns.value, 'asdadsadas')
            })

            return {
                columns,
                tableData
            }
        }
    }
</script>

<style scoped lang="less">
    /* 状态样式 */
    .completed {
        color: #52c41a;
        font-weight: 500;
    }
    .in-progress {
        color: #1890ff;
        font-weight: 500;
    }
    .planned {
        color: #fa8c16;
        font-weight: 500;
    }
    .not-started {
        color: #bfbfbf;
    }

    /* 表格样式调整 */

    /* 分组表头样式 */
    .check-table :deep(.@{ant-prefix}-table-thead) > tr > th {
        background: #3875ff;
        color: #fff;
        font-weight: 600;
        padding: 8px 16px;
        border-right: 1px solid #d9d9d9 !important;
        position: relative;
    }
    .check-table :deep(.@{ant-prefix}-table-tbody) tr > td {
        font-size: 14px;
        font-family: arial, helvetica, 'microsoft yahei';
        font-weight: 400;
        color: #262626;
        border-bottom: 1px solid #d9d9d9;
        padding: 3px 16px;
        word-break: break-all;
    }
</style>
